<template>
  <img :src="playMusicDetial.al.picUrl" alt="" class="bgimg" />
  <div class="detailTop">
    <div class="detailTopLeft">
      <i class="icon liebiao" @click="goHome">X</i>
      <div class="leftMarquee">
        <!-- <p>{{playMusicDetial.al.name}}</p> -->
        <Vue3Marquee>
          <p>{{ playMusicDetial.al.name }}</p>
        </Vue3Marquee>
        <span v-for="(item, index) in playMusicDetial.ar" :key="index">{{
          item.name
        }}</span>
      </div>
    </div>
    <div class="detailTopRight">
      <i class="icon liebiao">O</i>
    </div>
  </div>
  <div class="detailContent" v-show="!isLyricShow">
    <img
      src="@/assets/needle-ab.png"
      alt=""
      class="img_needle"
      :class="{ img_needle_active: !isbtnShow }"
    />
    <img src="@/assets/cd.png" alt="" class="img_cd" />
    <img
      :src="playMusicDetial.al.picUrl"
      alt=""
      class="img_ar"
      @click="isLyricShow = true"
      :class="{ img_ar_active: !isbtnShow, img_ar_pauesd: isbtnShow }"
    />
  </div>
  <div class="musicLyric" ref="musicLyric" v-show="isLyricShow">
    <p
      v-for="(item, index) in lyric"
      :key="index"
      :class="{
        active:
          currentTime * 1000 >= item.time && currentTime * 1000 < item.pre,
      }"
    >
      {{ item.lrc }}
    </p>
  </div>
  <div class="detailFooter">
    <div class="footerTop">
      <i class="icon">X</i>
      <i class="icon">X</i>
      <i class="icon">X</i>
      <i class="icon">X</i>
      <i class="icon">X</i>
    </div>
    <div class="footerContent">
      <input type="range" class="range" min="0" max="duration " v-model="currentTime" step="0.05">
    </div>
    <div class="footer">
      <i class="icon">X</i>
      <i class="icon" @click="prev">-</i>
      <span v-if="isbtnShow" class="icon bofang" @click="play">O</span>
      <span v-else class="icon bofang" @click="play">X</span>
      <i class="icon" @click="next">+</i>
      <i class="icon">X</i>
    </div>
  </div>
</template>

<script>
import { Vue3Marquee } from "vue3-marquee";
import "vue3-marquee/dist/style.css";
import { mapMutations, mapState } from "vuex";
export default {
  components: {
    Vue3Marquee,
  },
  data() {
    return {
      isLyricShow: false,
    };
  },
  computed: {
    ...mapState(["lyricList", "currentTime", "playlistIndex", "playlist",'duration']),
    lyric() {
      let arr = [];
      if (this.lyricList.lyric) {
        arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
          let min = item.slice(1, 3);
          let sec = item.slice(4, 6);
          let mill = item.slice(7, item[9] === "]" ? 9 : 10);
          let lrc = item.slice(item[9] === "]" ? 10 : 11, item.length);
          let time =
            parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          // console.log(min,sec,mill,lrc,time);
          return { min, sec, mill, lrc, time };
        });
        arr.forEach((item, i) => {
          if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
            item.pre = 100000;
          } else {
            item.pre = arr[i + 1].time;
          }
        });
      }
      return arr;
    },
  },
  methods: {
    goHome() {
      this.updateDetailShow();
      this.isLyricShow = false;
    },
    prev() {
      let index = this.playListIndex--;
      if(index === 0){
        index = this.playlist.length
      }
      this.updatePlayListIndex(index)
      console.log('上一首');
    },
    next() {
      let index = this.playListIndex++;
      if(index === this.playlist.length){
        index =0
      }
      this.updatePlayListIndex(index)
      console.log('下一首');
    },
    ...mapMutations(["updateDetailShow", "updatePlayListIndex"]),
  },
  watch: {
    currentTime: function (newValue) {
      let p = document.querySelector("p.active");
      // console.log([p]);
      if(p){
        if (p.offsetTop > 300) {
        this.$refs.musicLyric.scrollTop = p.offsetTop - 300;
      }
      }
      if(newValue === this.duartion){
        this.next()
      }
    }
  },
  mounted() {
    // console.log(this.playMusicDetial);
    // console.log(this.lyricList.lyric);
    this.addDuration()
  },
  props: ["playMusicDetial", "play", "isbtnShow",'addDuration'],
};
</script>

<style lang="less" scoped>
.bgimg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  filter: blur(70px);
}
.detailTop {
  width: 100%;
  height: 1rem;
  display: flex;
  padding: 0.2rem;
  justify-content: space-between;
  align-items: center;
  fill: #fff;
  .detailTopLeft {
    display: flex;
    align-items: center;
    .leftMarquee {
      width: 3rem;
      height: 100%;
      margin-left: 0.4rem;
      span {
        color: #999;
      }
      .icon {
        width: 0.3rem;
        height: 0.3rem;
        fill: #999;
      }
    }
  }
}
.detailContent {
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .img_needle {
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(-13deg);
    transition: all 2s;
  }
  .img_needle_active {
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(0deg);
    transition: all 2s;
  }

  .img_cd {
    width: 5rem;
    height: 5rem;
    position: absolute;
    bottom: 2.3rem;
    z-index: -1;
  }
  .img_ar {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    position: absolute;
    bottom: 3.14rem;
    animation: rotate_ar 10s linear infinite;
  }
  .img_ar_active {
    animation-play-state: running;
  }
  .img_ar_pauesd {
    animation-play-state: paused;
  }
  @keyframes rotate_ar {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
}
.musicLyric {
  width: 100%;
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.2rem;
  overflow: scroll;
  p {
    color: rgb(190, 181, 181);
    margin-bottom: 0.3rem;
  }
  .active {
    color: red;
    font-size: 0.5rem;
  }
}
.detailFooter {
  width: 100%;
  height: 3rem;
  position: absolute;
  bottom: 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .footerTop {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .icon {
      width: 0.36rem;
      height: 0.36rem;
      fill: rgb(245, 234, 234);
    }
    .icon {
      width: 0.6rem;
      height: 0.6rem;
    }
  }
  .range {
    width: 100%;
    height: 0.06rem;
  }
  .footer {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .icon {
      fill: rgb(245, 234, 234);
    }
    .bofang {
      width: 1rem;
      height: 1rem;
    }
  }
}
</style>